<template>
	<view>
		<!-- 1. 0 搜索框组件 -->
		<search />
		<!-- 2.0  分类页主体-->
		<view class="cate">
			<!-- 分类左边 -->
			<scroll-view scroll-y class="cate_left">
				<view 
					v-for="(item,index) in cateLeft" 
					:key="item.cat_id"
					class="cate_left_item"
          @tap="changeTabsIndex(index)"
					:class="index === activeIndex ? 'active': ''"
				>
					{{ item.cat_name }}
				</view>
			</scroll-view>
				<!-- 分类右边 -->
			<scroll-view scroll-y class="cate_right">
        <!-- 二级分类列表 -->
        <!-- block 空标签，专门用于编组的，可以写模板语法的 v-for v-if -->
        <block v-for="item in cateRight" :key="item.cat_id">
          <view class="cate_right_title">
            {{item.cat_name}}
          </view>
          <view class="cate_right_list">
            <!-- 三级分类列表 item.children -->
            <navigator 
              v-for="item2 in item.children" 
              :key="item2.cat_id" 
              :url="'/pages/goods_list/index?cid='+item2.cat_id" 
              class="cate_right_item"
            >
               <image class="cate_right_item_image" :src="item2.cat_icon"></image>
               <text class="cate_right_item_text">{{item2.cat_name}}</text>
            </navigator>
          </view>
        </block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
/* 
  1. 数据获取
    1. 左侧数据处理
    2. 右侧数据处理
  2. 左侧一级分类布局
  3. 左侧一级布局选项卡切换
    1. 初始化默认索引
    2. 元素绑定触摸事件
    3. 点击事件触发时改变索引
    4. 三元表达式根据索引进行 active 类名的绑定
  4. 右侧二级分类数据数据渲染和布局
  5. 点击左侧选项卡，切换右侧数据
  6. 小 bug 修复
      bug:右侧使用的是同一个 scroll-view 换了数据后，滚动条还是原本的位置。
      解决方案：点击左侧选项卡的时候，把 scroll-top 绑定的值重设为 0
      解决方案2：黑魔法，先把右侧数组清空(没有数据滚动条就回顶部了)，再通过单次定时器异步更新右侧数据
  7. 优化：分类页本地存储
      1. 没有数据，发送网络请求获取分类数据
      2. 有数据，(超过时间认为数据失效)
          1. 失效，重新发起网络请求
          2. 有效，使用本地存储
   
*/
import search from '../../components/search/index.vue';

// 小优化：cateAll 不直接用于页面渲染，放到外面作为全局变量
let cateAll;

export default {
	components:{
		search
	},
  // 小优化：data 中放的数据最好是和页面渲染有直接关系的
	data() {
		return {
			cateLeft: [],
			cateRight: [],
      activeIndex: 0,
      rightTop:0,
		}
	},
	onLoad() {
    // 获取本地存储的数据
    cateAll = uni.getStorageSync('cateAll');
    let cateAllEndTime = uni.getStorageSync('cateAllEndTime');
    // console.log(typeof cateAll);  // '' 如果没有是空字符串
    // 如果没有本地存储，发送网络请求
    if(!cateAll){
      // 发送网络请求
      this.getCategory();
    }else{
      const now = +new Date();
      // 数据有效
      if(cateAllEndTime - now > 0){
        // 左右分类数据绑定
        this.cateLeft = cateAll.map(item=>({cat_id: item.cat_id,cat_name: item.cat_name}));
        this.cateRight = cateAll[0].children;
      }
      // 数据失效
      else{
        // 发送网络请求
        this.getCategory();
      }
    }
	},
	methods: {
    changeTabsIndex(index){
      // console.log('index', index);
      this.activeIndex = index;
      // console.log('cateAll', cateAll);
      // 更新右侧数据
      // 清空数组，让滚动条回到顶部
      this.cateRight = [];
      // 通过异步定时器，让更新视图的代码晚一点执行
      setTimeout(()=>{
        this.cateRight = cateAll[index].children;
      },0)
      
      // this.cateRight = cateAll[index].children;
      // 让滚动条重新回到顶部
      // this.rightTop = 0;
    },
		getCategory(){
			uni.request({
				url:"https://api-hmugo-web.itheima.net/api/public/v1/categories"
			}).then(res=>{
        // 把 cateAll 变成全局的数据
				cateAll = res[1].data.message;
				console.log('cateAll',cateAll);
				// 左侧一级分类数据处理
				this.cateLeft = cateAll.map(item=>({cat_id: item.cat_id,cat_name: item.cat_name}));
				// console.log(this.cateLeft);
				this.cateRight = cateAll[0].children;
				console.log('右侧数据,第一个选项卡的下的二级分类',this.cateRight);
        // 保存到本地存储
        uni.setStorageSync('cateAll', cateAll);
        // 保存一个数据过期的时间戳
        const cateAllEndTime = +new Date() + 30 * 60 *1000;   // 测试的时候可以把时间调成 10 * 1000
        uni.setStorageSync('cateAllEndTime',cateAllEndTime);
			});
		}
	}
}
</script>

<style lang="less">
	.cate{
		display: flex;
		// CSS3 新增的计算功能，优点：不同单位也能计算
		// height: calc(100vh - 100rpx);
		&_left{
			// 👿 使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。(否则手机有兼容问题)
			// 👿 calc 加减号两边至少一个空格。
			height: calc(100vh - 100rpx);
			width: 182rpx;
      // 不允许盒子收缩，宽度是多少就是多少
      flex-shrink: 0;
			background-color: #F3F3F3;
			&_item{
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				// 👿 注意这里 active 类名的 & 和 . 是连在一起的
				&.active{
					color:var(--mainColor);
					position: relative;
					font-weight: bold;
					&::before{
						content: "";
						position: absolute;
						left:0;
						top:20rpx;
						bottom: 20rpx;
						width: 5rpx;
						background-color:var(--mainColor);
					}
				}
			}
		}
		&_right{
			// 使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。
			height: calc(100vh - 100rpx);
			flex: 1;
      .cate_right_title{
        height: 80rpx;
        font-size: 28rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        &::before,
        &::after{
          content: "/";
          color:#ccc;
          margin:0 10rpx;
        }
        
      }
      .cate_right_list{
         display: flex;
         flex-wrap: wrap;
      }
      .cate_right_item{
        width: 33.33%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10rpx 0;
      }
      .cate_right_item_image{
        width: 120rpx;
        height: 120rpx;
      }
      .cate_right_item_text{
        font-size: 22rpx;
      }
		}
	}
	
</style>
